<template>
	<div class="AliWapPay">
		<div class="AliWapPay-top">付款金额：<span>￥{{AliPayInfodata.total_fee}}</span></div>
		<div class="AliWapPay-bottom">
			<div class="AliWapPay-title">选择付款方式</div>
			<div class="AliWapPay-item" @click="GetAliWapPayApi"> <img class="aitem-icon" src="../assets/btn_alipay_to_pay.png" /> 支付宝支付
			</div>
			<!--<div class="AliWapPay-item" @click="GetWxPayInfoaApi"> <img class="aitem-icon" src="../assets/btn_wechat_payment.png" /> 微信支付-->
		</div>
	</div>
	</div>

</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "AliWapPay",
		data() {
			return {
				orderId: this.$route.query.orderId,
				orderNo: this.$route.query.orderNo,
				ordertype: this.$route.query.ordertype,
				payPrices: this.$route.query.payPrices,
				title: this.$route.query.title,
				mySessionUserinfo: JSON.parse(sessionStorage.getItem("userinfo")), //登录验证
				WxPayInfo: []
			}
		},
		computed: {
			...mapGetters([
				'source',
				'version',
				'AliPayInfodata',
				'GetSpbillcreateipData'
			])
		},
		created() {
			console.log(this.orderId)
			console.log(this.orderNo)
			if(this.orderNo != null && this.title == null) {
				this.GetAliPayLongApi()
			}
			if(this.ordertype == 1 && this.orderNo != null) {
				this.GetAliPayShortApi()
			}
		},
		methods: {
			...mapActions({
				setAlipayInfo: 'setAlipayInfo'
			}),
			GetAliPayLongApi() {
				let ajaxSign = {
					source: this.source, // string 是 ios
					orderNo: this.orderNo, //string 是 生成支付订单后返回的orderNo
					userId: this.mySessionUserinfo.id.toString(), //string 是
					token: this.mySessionUserinfo.token, //string 是
					orderId: this.orderId.toString() //string 是
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetAliPayLong(ajaxData)
					.then(res => {
						this.setAlipayInfo(res.result.content);
					})
			},
			GetAliPayShortApi() {
				let shortalpay = {
					out_trade_no: this.orderNo,
					subject: this.title,
					total_fee: this.payPrices.toString(),
				}
				this.setAlipayInfo(shortalpay);
				//				let ajaxSign = {
				//					source: this.source, // string 是 ios
				//					token: this.mySessionUserinfo.token, // string 是 72386 c4045cc2f9b5a4d7e04e6e7a273
				//					orderId: this.orderId.toString(), // string 是 订单Id
				//				}
				//				let ajaxData = api.getAES(ajaxSign);
				//				api.GetAliPayInfo(ajaxData)
				//					.then(res => {
				//						let result = res.result.content;
				//						console.log("短租：")
				//						console.log(result)
				//						
				//					})
			},
			GetAliWapPayApi() {
				let ajaxSign = {
					'source': this.source,
					'token': this.mySessionUserinfo.token,
					'orderId': this.orderId.toString()
					//					source: this.source,
					//					token: this.mySessionUserinfo.token,
					//					orderId: this.orderId.toString(),
					//					orderNo: this.AliPayInfodata.out_trade_no,
					//					title: this.AliPayInfodata.subject,
					//					payPrices: this.AliPayInfodata.total_fee,
					//					userId: this.mySessionUserinfo.id.toString(), //string 是
					//					desc: "desc"
				};
				let ajaxData = api.getAES(ajaxSign);
				console.log(ajaxData)
				api.GetAliPayInfo(ajaxData)
					.then(res => {
						console.log(res)
						var content = res.result.content;
						var timestampdate = new Date();
						var timestampal = timestampdate.getFullYear() + "-" + parseInt(timestampdate.getMonth() + 1 < 10 ? '0' + (timestampdate.getMonth() + 1) : timestampdate.getMonth() + 1) + "-" + parseInt(timestampdate.getDate() < 10 ? '0' + (timestampdate.getDate()) : timestampdate.getDate()) + " " + timestampdate.getHours() + ":" + timestampdate.getMinutes() + ":" + timestampdate.getSeconds();
						var prodConfig = {
							"body": content.body,
							"subject": content.subject,
							"out_trade_no": content.out_trade_no,
							"timeout_express": "90m",
							"total_amount": content.total_fee,
							"product_code": "QUICK_MSECURITY_PAY",
							"seller_id": content.seller_id
						}
						var alipayConfig = {
							biz_content: JSON.stringify(prodConfig),
							app_id: '自己的appid',
							version: '1.0',
							format: 'json',
							sign_type: content.sign_type,
							method: 'alipay.trade.wap.pay',
							notify_url: content.notify_url,
							return_url: 'http://***/alipy/return_url.php',
							charset: 'UTF-8',
							sign: 'L3quItR9hqIfsgjZVqDO/L8k5dmdSSn7KCQcHMRsZl0yzFa9im5Ge/ZXZh1sIo+fqr5zJkUUYmZknERw+iPiiNt/w0VLKPzjgzL4afoQ4oS5vnD8SzdccA9C1E5GxjvJCXGseeciQpyNkMmvXwTcL7egS4ukn2dAV0lpcM8KNPJdi+1HlWgAlnFT0Xq6Kqs24GD+Fd4ogpXoWOa3HfSjY1+DY+7FwKyunTvR9isN/kRIckW887GE2Dy2jRSghhANrf47f54SDMu+UcuRsNfxsgwfSTiafTW1q8Eym/2G7PBOWnI0I5llD7bs9Qu3zB/b+IpLlkEa0jUNj1rXgvkjww==',
							timestamp: timestampal
						}
						console.log(alipayConfig)
						this.httpPost("https://openapi.alipay.com/gateway.do", alipayConfig)
						//						$(".AliWapPay").append(res);
					})
			},
			httpPost(URL, PARAMS) {
				var temp = document.createElement("form");
				temp.action = URL;
				temp.method = "post";
				temp.style.display = "none";
				for(var x in PARAMS) {
					var opt = document.createElement("textarea");
					opt.name = x;
					opt.value = PARAMS[x];
					temp.appendChild(opt);
				}
				document.body.appendChild(temp);
				temp.submit();
				return temp;
			},
			GetWxPayInfoaApi() {

				let ajaxSign = {
					source: this.source, // string 是 ios
					version: this.version,
					token: this.mySessionUserinfo.token, // string 是 72386 c4045cc2f9b5a4d7e04e6e7a273
					orderId: this.orderId.toString(), // string 是 30
					spbill_create_ip: this.GetSpbillcreateipData.onlineip // string 是 ip
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetWxPayInfo(ajaxData)
					.then(res => {
						if(res.sta == 200) {
							this.WxPayInfo = res.result;
							//							console.log(this.WxPayInfo)
							this.wxpay();
						}
					})

			},
			wxpay() {},

		}
	}
</script>

<style>
	.AliWapPay {
		color: #282828;
		font-size: .28rem;
		line-height: .28rem;
		padding: .24rem;
		box-sizing: border-box;
		border-top: .24rem solid #EEECEC;
	}
	
	.AliWapPay-top {
		margin-bottom: .24rem;
	}
	
	.AliWapPay-top span {
		color: #E25051;
	}
	
	.AliWapPay-title {
		font-size: .25rem;
		color: #a4a4a4;
	}
	
	.aitem-icon {
		width: .65rem;
		height: .65rem;
		margin-right: .19rem;
	}
	
	.AliWapPay-item {
		padding: .36rem 0 .36rem .64rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
</style>